<template>
	<view class="message">
		<view class="content">
			<view class="line" v-for="(item, index) in info" :key="index" @click="jump('message_list', item.type)">
				<view class="left">
					<image  :src="item.img" mode="aspectFill"></image>
					<view v-if="item.num > 0" class="num">{{item.num}}</view> 
				</view> 
				<view class="right">
					<view class="top">
						<text class="txt txtwid">{{item.name}}</text>
						<text class="txt2" style="width:200rpx">{{item.time}}</text>
					</view>
					<view>
						<text class="txt1">{{item.title}}</text> 
					</view>
				</view>
			</view>
			
			<view v-for="(item,index) in pageResult.list" :key="index" class="line bg" @click="clickFun(index)">
				<view class="left">
					<image :src="item.icon" mode="aspectFill"></image>
					<!-- <view class="num" v-if="index==0||index==2">6</view> -->
					<view class="dot" v-if="item.isRead==0"></view>
				</view>

				<view class="right">
					<view class="top"> 
						<view class="txt2 txtwid" >{{item.title}}</view> 
						<text class="txt2" style="width:200rpx">{{item.time}}</text>
					</view>
					<view> 
						<text class="txt">{{item.content}}</text> 
					</view>
				</view>
			</view>

		</view>

		<view v-if="info.length == 0 && pageResult.list.length == 0" class="nocontent">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" mode="widthFix"></image>
			<!-- <text>您暂未收到信息～</text> -->
		</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				info: {},
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					type: 9,
					page: 1,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getInfo(){
				serve
					.request({
						url: '/member/message/index',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
						}
					})
					.then(res => {
						this.info = res.data.typeList;
						this.pageResult.list = res.data.otherList;
					});
			},
			getList() {
				var self = this;
				self.pageParam.page++
				serve
					.request({
						url: '/member/message/list',
						data: self.pageParam
					})
					.then(res => {
						if (res.data && res.data.length > 0) {
							self.pageResult.list=self.pageResult.list.concat(res.data);
						}
						self.pageResult.isEmpty = self.pageResult.list.length == 0;
						self.pageResult.isEnd = res.data.length == 0; 
					});
			},
			clickFun(key) {
				var item = this.pageResult.list[key];
				if(item.isRead == 0) {
					serve
						.request({
							url: '/member/message/view',
							data: {
								appkey: uni.getStorageSync('appkey'),
								'access-token': uni.getStorageSync('access-token'),
								id: item.id
							}
						})
						.then(res => {
							if(res.code != 200) {
								uni.showToast({
									title: res.message,
									icon : 'none'
								});
								return ;
							} 
							if(item.jump_type == '') {
								this.jump('message_view', item.id);
								return ;
							} else {
								this.jump(item.jump_type, item.data_id);
								return ;
							}
						});
					return ;
				}
				if(item.jump_type == '') {
					this.jump('message_view', item.id);
					return ;
				} else {
					this.jump(item.jump_type, item.data_id);
					return ;
				}
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			if(uni.getStorageSync('access-token') == '') {
				common.jump('login');
				return ;
			}
			this.getInfo();
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		onShow(){
			this.getInfo();
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		onPullDownRefresh() {
			this.getInfo();
		},
		onReachBottom() {
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.message {
		width: 100%;
		.content {
			width: 100%;

			.bg {
				background: #FFFFFF !important;
			}

			.line {
				box-sizing: border-box;
				padding: 50rpx 30rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx rgba(57, 72, 107, 0.1) solid;
				background: rgba(60, 72, 104, 0.04);

				.left {
					width: 100rpx;
					height: 100rpx;
					position: relative;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.num {
						position: absolute;
						width: 30rpx;
						height: 30rpx;
						line-height: 30rpx;
						top: 0;
						right: 0;
						background: rgba(235, 89, 56, 1);
						border-radius: 50%;
						font-size: 24rpx;
						color: rgba(255, 255, 255, 1);
						text-align: center;
					}

					.dot {
						position: absolute;
						top: 9rpx;
						right: 9rpx;
						width: 14rpx;
						height: 14rpx;
						background: rgba(235, 89, 56, 1);
						border-radius: 50%;
					}
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 540rpx;

					.top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.txt {
						font-size: 28rpx;
						color: rgba(60, 72, 104, 1);
					}

					.txt1 {
						font-size: 28rpx;
						color: rgba(60, 72, 104, 0.4);
					}

					.txt2 {
						font-size: 28rpx;
						color: rgba(60, 72, 104, 0.5);
					}

					.txtwid {
						width: 400rpx;	
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
				}
			}

		}
        .nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:28rpx;
				color:rgba(204,204,204,1);
			     margin-top: 30rpx;
			}
		}
	}
</style>
